<!-- 用户注册 -->
<template>
    <div class="register_background">
      <van-form @submit="onSubmit" class="my-form">
        <h2>用户注册</h2>
        <van-cell-group inset>
          <van-field v-model="userName" name="userName" label="用户名" placeholder="用户名"
            :rules="[{ validator: checkuser, message: '请输入格式正确的用户名' }]" />
          <van-field v-model="stuNo" name="stuNo" label="学号" placeholder="请输入电话号码"
            :rules="[{ validator: checkstuNo, message: '请输入格式正确的电话号码' }]" />
          <van-field v-model="passWord" type="password" name="passWord" label="密码" placeholder="请输入密码"
            :rules="[{ validator: checkpass, message: '请填写格式正确的密码' }]" />
          <van-field v-model="passWords" type="password" name="passWords" label="密码" placeholder="请再次输入密码"
            :rules="[{ validator: checkpasss, message: '两次密码不一致' }]" />
        </van-cell-group>
        
        <div style="margin: 20px;">
          <van-button round block type="primary" native-type="submit">
            点击注册
          </van-button>
        </div>
         <div class="center">
                  <router-link to="/login">已有账号？点击前往登录</router-link>
                  <!-- <van-button type="primary" to="/register">前往注册</van-button> -->
                  <br>
                  <router-link to="/home">返回首页</router-link>
              </div>
      </van-form>
    </div>
  </template>
  
  <script setup lang='ts'>
  import { onMounted, ref } from 'vue';
  import { showToast } from 'vant';
  import 'vant/es/toast/style';
  import { useRouter } from 'vue-router';
  import $bus from "../config/eventBus";
  import { onUnmounted } from 'vue'
  import { RegParams, regUrl } from "../api/api"
  const stuNo = ref<string>('');
  const userName = ref<string>('')
  const passWord = ref<string>('');
  const passWords = ref<string>()
  const router = useRouter()
  //验证用户名
  const checkuser = (val: string) => {
    //2-16个字符(可包含中文,数字,字母和下划线)
    return /^[\u4e00-\u9fa5\w]{3,16}$/.test(val);
  }
  //验证手机号
  const checkstuNo = (val: string) => {
    return /^-?[1-9]\d*$/.test(val);
  }
  
  //验证密码
  const checkpass = (val: string) => {
    //验证密码 6至15位的字母+数字
    return /^(?!\D+$)(?![^a-zA-Z]+$)\S{6,15}$/.test(val);
  }
  
  //验证再次输入的密码
  const checkpasss = (val: any) => {
    //判断两次密码是否相等
    return val === passWord.value
    // return /^(?!\D+$)(?![^a-zA-Z]+$)\S{6,15}$/.test(val);
  }
  //点击提交
  const onSubmit = async (values: RegParams) => {
    console.log('注册列表携带的参数', values)
    const res = await regUrl(values)
    console.log('注册后信息', res);
        // console.log('登录成功', values)
        showToast(res.data.msg)
        //登陆成功把token放在本地
        // 如果注册成功跳转到登陆
        router.push("/login")
    
  };
  //登陆页不要tabBar
  onMounted(() => {
    $bus.emit("tabBarHide", false);
  })
  //页面离开记得销毁
  onUnmounted(() => {
    $bus.emit("tabBarHide", true);
  })
  </script>
  
  
  <style scoped lang='scss'>
  .register_background {
    height: 700px;
    background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F06%2F20200406193824_YUEEQ.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672305371&t=ce4bc17c57a6cf027d2ec7063da4ba37");
  }
  
  // 注册居中
  .center {
    text-align: center;
  }
  
  .my-form {
    padding-top: 150px;
  
    h2 {
      text-align: center;
      font-size: 21px;
      color: #666;
      // margin-bottom: 21px;
    }
  }
  </style>